.header
    border $line-secondary solid $color-text-primary
    text-style(header)


.header-inner
    display flex
    flex-wrap nowrap
    align-items center
    margin-top $margin-m-2
    margin-bottom $margin-m-2

    #menu-btn
        display none

    .site-nav
        flex-grow 1
        overflow-x auto

.menu-list
    text-align right
    display flex
    .menu-item
        position relative
        margin-left $margin-l-0

    &:before
        content ""
        flex-grow 1

.menu-item
    underline-motion(header)

.menu-item-active:after
    border-bottom solid $line-secondary 
    width 100%

.logo-img
    max-height $line-height-heading-h1
    width auto
    max-width 100%
    display flex 

@media (max-width: 688px)
    .header-inner
        flex-wrap wrap
        #menu-btn
            display block!important
            text-align right
            width 50%
            
            .icon
                float right

        .site-brand-container
            width 50%
            
        .site-nav
            width 100%
            .menu-list
                height 0
                overflow hidden
                .menu-item
                    margin-right 0
                    margin-left auto
                    margin-top $margin-m-0


            .active
                margin-top $margin-m-1
                height auto
                flex-direction column
                 

        

        

    
